<template>
	<div>
		<div id="container"></div>
	</div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
window.AMapSecurityConfig = {
	securityJsCode: '53f1dbb1d3585c00ad5fcad8d4c1fc10'
}
export default {
	name: 'GetVueAmap',
	data() {
		return {
			map: null
		}
	},
	mounted() {
		//不能写在created 里面
		this.initMap()
	},
	methods: {
		initMap() {
			AMapLoader.load({
				key: '8291edd8f5b87517f6a26dd33ed0fdf6', // 申请好的Web端开发者Key，首次调用 load 时必填
				version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
				plugins: [] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
			})
				.then(async AMap => {
					let imageLayer = new AMap.ImageLayer({
						url: '',
						bounds: new AMap.Bounds([120.74152, 30.75142], [120.74778, 30.75512]),
						zooms: [15, 20],
						zIndex: 10
					})
					this.map = new AMap.Map('container', {
						//设置地图容器id
						viewMode: '2D', //是否为3D地图模式
						zoom: 15.5, //初始化地图级别
						center: [120.7339, 30.74589] //初始化地图中心点位置
					})
					// let trafficLayer = new AMap.TileLayer.Traffic({
					// 	zIndex: 1
					// })
					// this.map.add(trafficLayer, imageLayer)
					this.map.add(imageLayer)
				})
				.catch(e => {
					console.log(e)
				})
		}
	}
}
</script>

<style lang="scss">
#container {
	padding: 0px;
	margin: 0px;
	width: 100%;
	height: 739px;
}
</style>
